<style>
    .contenedorRoles {
        float:right;
        /*background-color:red;*/
        /*min-width:250px;*/
        min-height:64px;
        margin-right:15px;
        width:38%;
    }
    
/*    .contenedorTipoProyecto {
        float:left;
        background-color:black;
        color:black;
        border-color:whitesmoke;
        padding:5px;
        margin-right:10px;
        min-height:75px;
        box-shadow:0px 0px 10px black;
        text-align:center
    }*/
    
/*    .contenedorImagenTipoProyecto {
        float:left;
        min-height:75px;
        width:100%;
        text-align:center;
        padding-right:10px;
    }*/
</style>
<div class='contenedorRoles'>  
    <?php
        if ($roles = obtenerRolesUsuario($_POST['uid'])) {
            $x = 0;
            $tipoProyectoAux = 0;
            while ($x < count($roles)){
                $tipoProyecto = $roles[$x]['idTipoProyecto'];
                if (($x < count($roles)) && ($tipoProyecto == $tipoProyectoAux)) echo '<br>';
                if ($tipoProyecto != $tipoProyectoAux) {
                    if ($x != 0) echo '</div>'; ?>
                        <div class='contenedorTipoProyecto'>
                            <div class="cartel"><?php echo $roles[$x]['descripcionTipoProyecto']; ?></div>
                            <div class='contenedorImagenTipoProyecto'>
                                <img style="position:relative;right:-30px;bottom:-30px;" src="../<?php echo $roles[$x]['imagenDark'] ?>">
                            </div>
                    <?php $tipoProyectoAux = $tipoProyecto;    
                }
                echo $roles[$x]['descripcionRol'];
                $x++;
            }

            echo '</div>';
        } else {
            echo 'No tiene asignados roles';
        }
    ?>                    
</div>
    
<!-- Función para poner la imagen en función del tipo de proyecto, en principio, cine o teatro -->
<?php 
//function insertarImagenTipoProyecto($tpid) {
//     switch ($tpid) {
//        case 1:
//            return "<img src='../img/vintage6.png'>";
//            break;
//        case 2:
//            return "<img src='../img/mask.png'>";
//            break;
//        default:
//            return "none";
//    }
//
//}